<template>
	<view class="">
		<!-- 顶部图片 -->
		<u-image src="https://www.sqkjkj.vip/wxImg/common/collectCoupons/banner.png" mode="aspectFill" width="750rpx" height='225rpx'>
		</u-image>
		
		<!-- 平台优惠券 -->
		<view class="bg_FFFFFF u-p-10">
			<view class="u-font-30 u-p-20 u-weight">平台优惠券</view>
			<view class=" u-flex-col u-col-center" v-if="platforms.length==0">
				<u-empty mode="coupon"></u-empty>
			</view>
			<scroll-view scroll-x v-if="platforms.length>0">
				<view class="u-flex u-w-710">
					<view class="u-w-511 u-h-216 u-m-r-20 u-p-30" :style="{'background':`${item.is_continue==0?'':'url(https://www.sqkjkj.vip/wxImg/common/collectCoupons/img1.png'}) no-repeat`,'background-size': '100% 100%'}" v-for="(item,index) in platforms" :key="index" @click="get_card(item.id)">
						<view class="u-w-511 u-p-l-15">
							<view class="u-font-55 cl_FF4B3CFF u-weight">{{item.type==3?`${item.discount}折`:item.use_money}}</view>
							<view class="">
								<view class="u-weight u-font-28">{{item.type==1?'无门槛':item.type==2?'满减优惠券':item.type==3?'折扣优惠券':'消费券'}} </view>
								<view class="cl_999 u-font-24 u-p-t-5">{{item.type==1?'无门槛使用':`满${item.limit_money}元可用`}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 商家优惠券 -->
		<view class="u-m-t-30 u-p-20 ">
			<view class="u-font-30 u-weight">商家优惠券</view>
			<view class=" bg_FFFFFF u-m-t-20 u-p-b-20 u-b-r-14" v-for="(item,index) in shop_card" :key="index">
				<view v-if="item.shop_info" class="u-p-20 u-flex u-row-between">
					<view class="u-flex">
						<u-image :src="item.shop_info.logo_url" mode="aspectFill" width="93rpx" height='93rpx' border-redius='16'>
						</u-image>
						<view class="">
							<view class="u-flex">
								<u-image v-if="item.shop_info.is_bond==1" src="https://www.sqkjkj.vip/wxImg/common/collectCoupons/img2.png" mode="aspectFill" width="28rpx"
									height='28rpx'></u-image>
								<view class="u-weight u-font-28 u-m-l-10 u-p-t-10" @click="show=false">{{item.shop_info.name}}</view>
							</view>
							<view class="u-font-28 u-p-10 cl_999"><text class="cl_FB473CFF">{{item.coupon_list.length}}</text>张优惠券</view>
						</view>
					</view>
					<view class="" >
						<view class="" style="text-align: right;">
							<u-icon name="map" size='20'></u-icon>
							<text class="cl_848484FF u-font-24">{{item.shop_info.distance}}KM</text>
						</view>
						<view class="bl3A_72 u-text-center cl_FFF u-w-140 u-h-50 u-b-r-24 u-font-24 u-text-center u-l-h-50 u-m-t-20"  @click="lick(item.shop_info.id)">{{item.shop_info.is_like==0?'关注':'已关注'}}</view>
					</view>
				</view>
				<view class=" u-flex-col u-col-center" v-if="item.coupon_list.length==0">
					<u-image src='https://www.sqkjkj.vip/wxImg/1.png' width="100rpx" height='100rpx'></u-image>
					<view class="u-p-b-20 u-font-28 cl_999">暂无可领优惠券</view>
				</view>
				<!-- 商家优惠券 -->
				<scroll-view scroll-x="true" v-else>
					<view class="" style="overflow: auto; width: 750rpx;">
						<view  class="u-flex u-p-l-20">
							<view class="u-m-r-20 u-w-411 u-h-180 u-flex u-row-between" :style="{'background':'url(https://www.sqkjkj.vip/wxImg/common/collectCoupons/img.png) no-repeat','background-size': '100% 100%'}"  v-for="(items,indexs) in item.coupon_list" :key='indexs'  @click="get_card(items.id)">
								<view class="u-t-20 u-w-311 u-p-l-30 cl_FFF">
									<view class="u-font-50 cl_FFF u-weight">{{items.type==3?`${items.discount}折`:items.use_money}}</view>
									<view class="">
										<view class="u-font-22">{{items.type==1?'无门槛':items.type==2?'满减优惠券':items.type==3?'折扣优惠券':'消费券'}} </view>
										<view class="u-font-20 u-p-t-5">{{items.type==1?'无门槛使用':`满${items.limit_money}元可用`}}</view>
									</view>
								</view>
								<view class="u-w-100 u-font-35 u-text-center cl_FF4B3CFF u-weight">立即领取</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 店铺优惠券 -->
		<u-popup v-model="show" mode='bottom'>
			<view class="u-p-30 cl_333">
				<view class="u-flex u-row-between">
					<view class="u-font-30 u-weight u-m-l-30">店铺优惠券</view>
					<u-image @click='show=false' src="https://www.sqkjkj.vip/wxImg/common/collectCoupons/close.png" mode="aspectFill"
						width="44rpx" height='44rpx'>
					</u-image>
				</view>
				<scroll-view :scroll-y='true'>
					<view class="" style="height: 600rpx;">

						<view class="u-p-10 u-rela">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/collectCoupons/img5.png" mode="aspectFill" width="674rpx"
								height='260rpx'>
							</u-image>
							<view class="u-abso u-w-660 u-t-10 u-p-30">
								<view class="u-flex u-row-between">
									<view class="">
										<view class="cl_1C1C1CFF u-font-28 u-weight u-p-6">到店消费券</view>
										<view class="u-p-6 u-font-20 cl_454545FF">仅支持到店使用</view>
										<view class="u-p-6 u-font-20 cl_454545FF">有效期：2022.04.25-2022.06.25</view>
									</view>
									<view class="cl_FC3533FF">
										<text class="u-font-26">￥</text>
										<text class="u-font-40">20</text>
									</view>
								</view>
								<view class=" u-flex u-row-between u-m-t-40">
									<view class="">

										<u-icon name="bag-fill" color='#FC3533FF'></u-icon>
										<text class="u-font-20">甜甜零食铺</text>
									</view>
									<view class="bg_FC3533FF u-p-10 cl_FFF u-b-r-10 u-font-20">
										立即领取
									</view>
								</view>
							</view>
						</view>

					</view>
				</scroll-view>

			</view>

		</u-popup>

	</view>

</template>

<script>
	// import indexList1 from "@/common/index.list.js";
	export default {
		data() {
			return {
				show: false,
				current: 0,
				list: ['integral', 'kefu-ermai', 'coupon', 'gift'],
				// 平台优惠券
				platforms: [],
				// 平台优惠券
				page:1,
				page_size:10,
				shop_card:[],
				asd:''
			}
		},

		onLoad() {
			// 获取平台优惠券
			this.platform()
			// 获取店铺优惠券
			this.shop()
		},
		methods: {
			// 平台优惠券
			platform() {
				this.$api.platform_card({}, res => {
					if (res.data.code == 1) {
						this.platforms = res.data.data.coupon_list
					}
				})
			},
			// 商家优惠券
			shop(){
				this.$api.shop_card({
					page:this.page,
					page_size:this.page_size
				},res=>{
					if(res.data.code==1){
						this.shop_card=this.shop_card.length==0?res.data.data.shop_coupon_list:[this.shop_card,...res.data.data.shop_coupon_list],
						this.page++
						for (var i = 0; i < this.shop_card.length; i++) {
							for (var j = 0; j < this.shop_card[i].coupon_list.length; j++) {
								this.shop_card[i].coupon_list[j].limit_money=Math.floor(this.shop_card[i].coupon_list[j].limit_money)
							}
						}
					}
				})
			},
			// 领取优惠券
			get_card(id){
				console.log(id);
				this.$api.give_card({
					coupon_id:id
				},res=>{
					console.log(res);
					if(res.data.code==1){
						uni.showToast({
							icon:'success',
							title:'领取成功'
						})
						this.platform()
						this.page=1
						this.shop_card=[]
						this.shop()
					}else{
						uni.showToast({
							icon:'error',
							title:res.data.msg
						})
					}
				})
			},
			
			// 点击关注店铺
			lick(obj){
				this.$api.lick_shop({
					shop_id:obj
				},res=>{
					console.log(res);
					this.asd=obj
					uni.showToast({
						icon:'none',
						title:res.data.msg
					})
					this.page=1
					this.shop_card=[]
					this.shop()
				})
			},
			// 点击返回上一页
			backs() {
				uni.navigateBack()
			},
			change(e) {
				this.current = e.detail.current;
				console.log(this.current);
			},
			click(index) {
				console.log(index);
			}
		}
	}
</script>

<style scoped>
	page {
		background: #F5F5F5FF !important;
		width: 750rpx;
		padding-bottom: 50rpx;
	}
	.swiper {
		height: 480rpx;
		padding: 10rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.swiper {
		height: 380rpx;
	}

	.indicator-dots {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.indicator-dots-item {
		background-color: #999999;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}

	.indicator-dots-active {
		background-color: red;
	}
</style>
